<template>
    <div class="detail">
        <div class="title">
            <h1>挂号详情</h1>
        </div>
        <div class="status_bar">
            <div class="left">
                <div class="status">
                    <span class="iconfont">
                        <svg t="1733726600065" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="23132" width="23" height="23">
                            <path
                                d="M511 960c-60.5 0-119.1-11.8-174.4-35.2-53.4-22.6-101.3-54.9-142.4-96-41.1-41.1-73.4-89-96-142.4C74.8 631.1 63 572.5 63 512s11.8-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4 41.1-41.1 89-73.4 142.4-96C391.9 75.8 450.5 64 511 64s119.1 11.8 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96 41.1 41.1 73.4 89 96 142.4C947.2 392.9 959 451.5 959 512s-11.8 119.1-35.2 174.4c-22.6 53.4-54.9 101.3-96 142.4-41.1 41.1-89 73.4-142.4 96C630.1 948.2 571.5 960 511 960z m0-832c-211.7 0-384 172.3-384 384s172.3 384 384 384 384-172.3 384-384-172.3-384-384-384z"
                                fill="#3688FF" p-id="23133"></path>
                            <path
                                d="M473 704h-0.2c-8.8-0.1-17.2-3.7-23.2-10.1l-170-181.8c-12.1-12.9-11.4-33.2 1.5-45.2 12.9-12.1 33.2-11.4 45.2 1.5l147 157.1 222.6-231.7c12.2-12.7 32.5-13.1 45.2-0.9 12.7 12.2 13.1 32.5 0.9 45.2l-246 256c-5.9 6.4-14.3 9.9-23 9.9z"
                                fill="#3688FF" p-id="23134"></path>
                        </svg>
                    </span>
                    {{ orderDetailData.param?.orderStatusString }}
                </div>
            </div>
            <div class="right">
                <img src="//img.114yygh.com/static/web/code_order_detail.png" class="code-img">
                <div class="content">
                    <div class="content_top">微信<span class="iconfont1">
                            <svg t="1733724974562" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="16640" width="20" height="20">
                                <path
                                    d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                                    fill="#09BB07" p-id="16641"></path>
                            </svg>
                        </span>关注“北京114预约挂号”</div>
                    <div class="watch-wrapper">快速挂号，轻松就医</div>
                </div>
            </div>
        </div>
        <div class="subTitle">挂号信息</div>
        <div class="info">
            <el-descriptions class="description" :column="1">
                <el-descriptions-item label="就诊人信息 ：">{{ orderDetailData.patientName }}</el-descriptions-item>
                <el-descriptions-item label="就诊日期 ：">{{ orderDetailData.reserveDate }} {{
                    orderDetailData.reserveTime == 1 ? '下午' : '上午'
                }}</el-descriptions-item>
                <el-descriptions-item label="就诊医院 ：">{{ orderDetailData.hosname }}</el-descriptions-item>
                <el-descriptions-item label="就诊科室 ：">{{ orderDetailData.depname }}</el-descriptions-item>
                <el-descriptions-item label="医生职称 ：">{{ orderDetailData.title }}</el-descriptions-item>
                <el-descriptions-item label="医是服务费 :">
                    <span>{{ orderDetailData.amount }}元</span>
                </el-descriptions-item>
                <el-descriptions-item label="挂号单号 ：">{{ orderDetailData.outTradeNo }}</el-descriptions-item>
                <el-descriptions-item label="挂号时间 ：">{{ orderDetailData.createTime }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="rule">
            <div class="rule-title"> 注意事项</div>
            <div class="rule-content">1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br> <span style="color:red">2、【取号】就诊当天需在{{
                orderDetailData.fetchTime }}前在医院取号，未取号视为爽约，该号不退不换；</span><br>
                3、【退号】在{{ orderDetailData.quitTime }}前可在线退号 ，逾期将不可办理退号退费；<br>
                4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
                5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
            </div>
        </div>
        <div class="btn" v-if="orderDetailData.orderStatus != -1">
            <el-button class="button" type="info" size="large" @click="cancle">取消预约</el-button>
            <el-button type="primary" size="large" @click="pay" v-if="orderDetailData.orderStatus == 0">支付</el-button>
        </div>
    </div>
    <div class="dialog">
        <el-dialog v-model="flag" width="350">
            <div class="dialog-content">
                <img :src="qrCodeUrl" alt="">
                <div class="wenzi">
                    <p>请使用微信扫一扫</p>
                    <p>扫描二维码支付</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { cancleRegisterAPI, getOrderDetailAPI, getPayResultAPI, getQRCODEAPI } from '@/api/user';
import { OrderInfoResponseData, PayStatusResponseData, QrCodeResponseData } from '@/api/user/type';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
// @ts-ignore
import QRCode from 'qrcode'

let orderDetailData = ref<any>({})
let qrCodeUrl = ref<string>('')

onMounted(() => {
    getOrderDetail()
})

let $route = useRoute()
const getOrderDetail = async () => {
    let res: OrderInfoResponseData = await getOrderDetailAPI($route.query.orderId as string)
    if (res.code == 200) {
        orderDetailData.value = res.data
    }
}

const cancle = () => {
    ElMessageBox.confirm(
        '确定要取消预约吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res: any = await cancleRegisterAPI($route.query.orderId as string)
            if (res.code == 200) {
                getOrderDetail()
                ElMessage({
                    type: 'success',
                    message: "取消预约成功！"
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: "取消预约失败~"
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
let flag = ref<boolean>(false)
const pay = async () => {
    flag.value = true
    let res: QrCodeResponseData = await getQRCODEAPI($route.query.orderId as string)
    let imgUrl = await QRCode.toDataURL(res.data.codeUrl)
    qrCodeUrl.value = imgUrl

    timer.value = setInterval(async () => {
        let res1: PayStatusResponseData = await getPayResultAPI($route.query.orderId as string)
        if (res1.data) {
            flag.value = false
            ElMessage({
                type: 'success',
                message: '支付成功'
            })
            clearInterval(timer.value)
            getOrderDetail()
        }
    }, 2000)
}
let timer = ref<any>('')
watch(() => flag.value, (val: boolean) => {
    if (val == false) {
        clearInterval(timer.value)
    }
})
</script>

<style scoped lang="scss">
.detail {

    .title {
        h1 {
            font-weight: bold;
        }
    }

    .subTitle {
        letter-spacing: 1px;
        color: #999;
        margin-top: 40px;
        display: flex;
        align-items: center;

        &::before {
            display: inline-block;
            content: '';
            height: 14px;
            width: 4px;
            background: #4990f1;
            margin-right: 6px;
            border-radius: 2px;
        }
    }

    .status_bar {
        margin-top: 20px;
        background-color: #f4f9ff;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            width: 50%;
            padding-left: 20px;

            .status {
                color: #4490f1;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 1px;
                display: flex;
                align-items: center;

                .iconfont {
                    margin-right: 6px;
                    font-size: 28px;
                    font-weight: 400;
                }
            }
        }

        .right {
            flex: 1;
            padding-left: 20px;
            display: flex;
            align-items: center;
            color: #333;
            width: 50%;

            img {
                width: 61px;
            }

            .content {
                margin-top: -3px;
                margin-left: 12px;
                width: 100%;

                .content_top {
                    width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    .iconfont1 {
                        color: #00c25f;
                        font-size: 24px;
                        margin: 0 3px;
                    }
                }

                .watch-wrapper {
                    margin-top: 3px;
                    width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .info {
        margin-top: 20px;
        color: #b1b0b0;

        ::v-deep .el-descriptions__cell {
            padding-bottom: 22px !important;
        }

        ::v-deep .el-descriptions__label {
            color: #999;
        }

        .description {
            display: flex;
            justify-content: center;
            padding-bottom: 30px;

            span {
                color: #4490f1;
                font-weight: bold;
            }
        }
    }

    .rule {
        margin-top: 10px;
        color: #333;

        .rule-title {
            color: #333;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .rule-content {
            line-height: 21px;
            letter-spacing: 1px;
        }
    }

    .btn {
        margin-top: 80px;
        display: flex;
        justify-content: center;

        .button {
            margin-right: 20px;
        }
    }
}

.dialog {

    .dialog-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .wenzi {
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                margin-bottom: 10px;
            }
        }
    }

}

::v-deep .el-dialog {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    background-color: #f7fbff;
    background-image: url();
    background-repeat: repeat;
}
</style>